<!--文章列表组件-->
<template>
  <div class="list">
    <div v-for="item in list" :key="item.articleId">
      <slot :item="item"><router-link :to="{path:'/article-'+item.articleId}">{{item.articleTitle}}</router-link></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";

import ArticleApi from '@/api/cms/ArticleApi';

const props = defineProps({
  typeId: {
    type: Number
  },
  size:{
    type: Number,
    default: 10
  }
});

const list = ref([]);//文章列表数据

onMounted(()=>{
  
  ArticleApi.page({articleTypeId:props.typeId,current:1,size:props.size,searchCount:false}).then(r=>{
    list.value=r.data.data.records;
  });
});

</script>

<style  scoped>
.list {
  color:#02649e;
  font-size: 1rem;
  line-height: 1.8;
  --list:'•';/*♥▶▷♡♢•▪*/
  --list-hover:#c00;
}
.list a {
  color:inherit;
}
.list a:hover {
  text-decoration: none;
  color:var(--list-hover);
}
.list > *::before {
  content: var(--list);
  margin: 0 .5rem;
}
</style>